<script lang="ts" setup>
import { IResponseData } from "@/@types/utils.request";
import { teletextRefund } from "../service";

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false,
	},
	refundData: {
		type: Object,
		default: () => {
			return {
				orderNo: "",
				serviceAmount: "",
				trafficAmount: "",
				refundReason: "",
			};
		},
	},
});

const emit = defineEmits<{
	(e: "update:modelValue", value: boolean): void;
	(e: "refresh", value: boolean): void;
}>();
const visible = computed({
	get() {
		return props.modelValue;
	},
	set(val) {
		emit("update:modelValue", !!val);
	},
});

const { refundData } = toRefs(props);

const model = ref({
	orderNo: "",
	serviceAmount: "",
	refundReason: "",
});

const getFetch = () => {
	model.value.orderNo = refundData.value.orderNo;
	model.value.serviceAmount = refundData.value.serviceAmount;
	model.value.refundReason = refundData.value.refundReason;
	console.log(model.value, refundData.value);
};

const formRef = ref<any>();
const rules = ref({
	orderNo: [{ required: true, message: "", trigger: "change" }],
	serviceAmount: [{ required: true, message: "请输入费用", trigger: "change" }],
	trafficAmount: [{ required: true, message: "请输入费用", trigger: "change" }],
});
const onConfirmm = async () => {
	if (!(await formRef.value.validate())) return;
	ElMessageBox.confirm("请确认退款？", {
		confirmButtonText: "确认",
		cancelButtonText: "取消",
		type: "warning",
	})
		.then(async () => {
			const response: IResponseData<any> = await teletextRefund({ ...model.value });
			const { code, msg } = response;
			if (code === 0) {
				ElMessage({
					message: msg,
					type: "success",
				});
				emit("refresh", true);
				emit("update:modelValue", false);
			} else {
				ElMessage({
					message: msg,
					type: "error",
				});
			}
		})
		.catch((error: any) => {
			// catch error
			console.log(error);
		});
};

const onCancel = () => {
	ElMessageBox.confirm("确定要退出吗？", {
		confirmButtonText: "确认",
		cancelButtonText: "取消",
		type: "warning",
	}).then(() => {
		emit("update:modelValue", false);
	});
};
</script>
<template>
	<el-dialog v-model="visible" title="订单退款" width="700px" @open="getFetch" :before-close="onCancel">
		<el-form :model="model" :rules="rules" label-width="120px" ref="formRef">
			<el-form-item label="订单编号" prop="orderNo">
				<el-input v-model="model.orderNo" disabled />
			</el-form-item>
			<el-form-item label="服务费" prop="serviceAmount">
				<el-input v-model="model.serviceAmount" />
			</el-form-item>
			<el-form-item label="备注" prop="refundReason">
				<el-input v-model="model.refundReason" :rows="2" type="textarea" placeholder="请输入..." />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="onCancel">取消</el-button>
				<el-button type="primary" @click="onConfirmm"> 确认 </el-button>
			</span>
		</template>
	</el-dialog>
</template>
